function createElement(vnode) {
  // 源码中createElement用来判断 _createElement才是实现下面代码的方法
  const { tag, props, children, text } = vnode;
  if (typeof tag === "string") {
    // 是标签
    // 创建真实节点
    vnode.el = document.createElement(tag);
    //处理属性
    updateProps(vnode);
    children.map((child) => {
      //递归
      vnode.el.appendChild(createElement(child));
    });
  } else {
    //文本节点
    vnode.el = document.createTextNode(text);
  }
  return vnode.el;
}
//处理属性
function updateProps(vnode) {
  const el = vnode.el,
    data = vnode.props || {};
  for (let key in data) {
    if (key === "style") {
      for (let skey in data.style) {
        el.style[skey] = data.style[skey];
      }
    } else if (key === "class") {
      el.className = el.class;
    } else {
      //其他属性
      el.setAttribute(key, data[key]);
    }
  }
}

//打补丁

export function patch(oldNode, vNode) {
  let el = createElement(vNode),
    parentElement = oldNode.parentNode; // 找到body
  // 将el插入oldNode下一个兄弟节点
  parentElement.insertBefore(el, oldNode.nextSibling);
  // 删除oldNode
  parentElement.removeChild(oldNode);
}
